<!--
 * @Author: your name
 * @Date: 2020-05-07 15:12:15
 * @LastEditTime: 2020-06-03 17:38:10
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \topevery_view_sq_web\src\views\components\orderly\BusInfo.vue
 -->

 <template>
  <section class="base-info" v-loading="loading">
    <section class="close" @click="close">
      <img style="width: 100%;height: 100%;" src="../../../assets/image/base/close.png">
    </section>

    <section class="title">
      渣土车详情
    </section>
    <section style="max-height: 2rem;overflow: overlay">
      <section class="row">
        <section class="label">车牌号</section>
        <section class="mh">：</section>
        <section class="value">{{data.name}}</section>
      </section>
      <section class="row">
        <section class="label">车辆类型</section>
        <section class="mh">：</section>
        <section class="value">{{data.vehicle_type_name}}</section>
      </section>
      <section class="row">
        <section class="label">车辆颜色</section>
        <section class="mh">：</section>
        <section class="value">{{data.licenseplate_color_name}}</section>
      </section>
      <section class="row">
        <section class="label">所属区域</section>
        <section class="mh">：</section>
        <section class="value"> {{data.area_name}}</section>
      </section>
      <section class="row">
        <section class="label">所属单位</section>
        <section class="mh">：</section>
        <section class="value">{{data.company_name}}</section>
      </section>
      <section class="row">
        <section class="label">最后在线</section>
        <section class="mh">：</section>
        <section class="value">{{data.gps_time}}</section>
      </section>
    </section>

    <section class="" style="width: 90%;margin: .1rem auto 0 auto;height: 1.8rem; margin-bottom: .1rem;">
      <!-- <video style="width: 100%;height: 100%;" src="../../../assets/video/aaa.mp4" controls="controls"></video> -->
      <!-- <video style="width: 100%;height: 100%;" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" controls="controls"></video> -->
      <img style="width:100%;height:100%;" src="../../../assets/time.png">
    </section>

    <section class="btn-gj" @click="getPath">查看轨迹</section>

  </section>
</template>

<script>
  import kshDregsDataApi from '@api/kshDregsData'

  export default {
    name: 'BusInfo',
    props: {
      data: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    data() {
      return {
        loading: false
      }
    },
    beforeDestroy() {
      this.$parent.$refs.map.clearPathAndMove()
    },
    methods: {
      close() {
        this.$emit('close')
      },
      // 获取轨迹
      getPath() {
        this.loading = true
        const {startTime, endTime} = this.$parent.getCurrentDate('currentDay')

        kshDregsDataApi.selectSegmentationData({startTime: startTime, endTime: endTime, vehicleId: this.data.vehicle_id})
          .then(res => {
            const data = res.data.locations
            const obj = {
              name: res.data.vehicleId,
              path: []
            }
            data.forEach(item => {
              obj.path.push([item.lng, item.lat])
            })
            this.$parent.$refs.map.drawPathAndMove([obj], 500)
            this.loading = false
          })
          .catch(() => {
            this.loading = false
          })
      }
    }
  }
</script>

<style scoped>
  .base-info {
    width: 100%;
    height: 100%;
    position: relative;
  }
  .title {
    height: .3rem;
    width: 86%;
    margin: 0 auto;
    text-align: left;
    padding-top: .18rem;
    font-size:16px;
    font-family:Microsoft YaHei;
    font-weight:400;
    color:rgba(255,255,255,1);
    border-bottom: .01rem solid #00FFFFBB;
  }

  .row {
    display: flex;
    text-align: left;
    width: 86%;
    margin: 0.1rem auto;
    line-height: .2rem;font-size: .12rem;
    /* border: 1px solid red; */
  }

  .label {
    width: 28%;
    color:#A4A4A4;text-align:justify; text-align-last: justify;
  }

  .border_red {
    border: 1px solid red;
  }

  .value {
    width: 70%;
    /*height: .2rem;*/
  }
  .yw-label {
    font-size: .12rem;
    font-family:Microsoft YaHei;
    font-weight:400;
    color:rgba(254,254,254,0.4);
    padding-top: .05rem;
  }
  .yw-value {
    font-size:16px;
    font-family:Microsoft YaHei;
    font-weight:bold;
    color:rgba(255,255,255,1);
    padding-top: .05rem;
  }
  .close {
    width: .17rem;
    height: .17rem;
    cursor: pointer;
    position: absolute;
    top: .22rem;
    right: .22rem;
  }
  .btn-gj {
    width: 1rem;
    height: .3rem;
    line-height: .3rem;
    font-size: .16rem;
    cursor: pointer;
    margin: .1rem auto;
    background: linear-gradient(90deg, rgba(48, 128, 252, 0.25), rgba(0, 255, 255, 0.25));
    border-radius: .02rem;
  }
</style>

